<style include="cr-shared-style os-settings-icons settings-shared iron-flex">
  #networkListDiv {
    min-height: var(--settings-row-min-height);
  }

  :host(:not([is-showing-vpn_])) #networkListDiv {
    margin-top: var(--cr-section-vertical-margin);
  }

  #cellularNetworkList {
    /* No extra margin-top when displaying the cellular network list. */
    margin-top: calc(-1*var(--cr-section-vertical-margin));
  }

  /* Set padding on children instead of the container itself to ensure that
      separator lines can fill the entire width of the page. */
  #networkListDiv > * {
    /* network-list is padded to the right to allow space for a ripple */
    padding-inline-end: calc(var(--cr-section-padding) -
        var(--cr-icon-ripple-padding));
    padding-inline-start: var(--cr-section-padding);
  }

  .add-button {
    margin-inline-end: var(--settings-control-label-spacing);
  }

  #onOff {
    font-weight: 500;
  }

  #onOff[on] {
    color: var(--cros-text-color-prominent);
  }

  .vpn-header {
    margin-bottom: 8px;
    margin-inline-end: 12px;
    margin-inline-start: 4px;
    margin-top: 8px;
  }

  .no-networks {
    margin: 4px;
  }

  network-list {
    flex: 1;
  }

  network-always-on-vpn {
    width: 100%;
  }

  #gmscore-notifications-container {
    border-top: var(--cr-separator-line);
    margin: 10px 0;
    padding-bottom: var(--cr-section-padding);
    padding-top: var(--cr-section-padding);
  }

  #gmscore-notifications-container[no-networks-text-below] {
    border-bottom: var(--cr-separator-line);
    margin-top: 0;
  }

  #gmscore-notifications-device-string {
    margin-top: 5px;
  }

  #gmscore-notifications-instructions {
    margin: 0;
    padding-inline-start: 15px;
  }

  #cellularNetworkList {
    padding-inline-end: 0;
    padding-inline-start: 0;
  }
</style>
<template is="dom-if" if="[[enableToggleIsVisible_(deviceState)]]">
  <div class="settings-box first">
    <div id="onOff" class="start" on$="[[deviceIsEnabled_(deviceState)]]"
        aria-hidden="true">
      [[getOffOnString_(deviceState,
        '$i18nPolymer{deviceOn}', '$i18nPolymer{deviceOff}')]]
    </div>
    <!-- The add button in this row is only shown for WiFi networks. -->
    <cr-icon-button class="icon-add-wifi add-button" id="addWifiButton"
        hidden$="[[!showAddWifiButton_(deviceState, globalPolicy)]]"
        aria-label="$i18n{internetAddWiFi}" on-click="onAddWifiButtonTap_"
        tabindex$="[[tabindex]]"
        deep-link-focus-id$="[[Setting.kWifiAddNetwork]]">
    </cr-icon-button>
    <cr-toggle id="deviceEnabledButton"
        aria-label$="[[getToggleA11yString_(deviceState)]]"
        checked="[[deviceIsEnabled_(deviceState)]]"
        disabled="[[!enableToggleIsEnabled_(deviceState,
          deviceState.inhibitReason)]]"
        on-change="onDeviceEnabledChange_"
        deep-link-focus-id$="[[Setting.kWifiOnOff]]
            [[Setting.kMobileOnOff]]">
    </cr-toggle>
  </div>
</template>

<template is="dom-if" if="[[knownNetworksIsVisible_(deviceState)]]">
  <cr-link-row
      id="knownNetworksSubpageButton"
      class="hr"
      label="$i18n{knownNetworksButton}"
      on-click="onKnownNetworksTap_"
      role-description="$i18n{subpageArrowRoleDescription}">
  </cr-link-row>
</template>

<template is="dom-if" if="[[deviceIsEnabled_(deviceState)]]">
  <div id="networkListDiv" class="layout vertical flex">
    <!-- VPN only header for built-in VPNs. -->
    <template is="dom-if" if="[[isShowingVpn_]]">
      <div class="vpn-header layout horizontal center">
        <div class="flex settings-box-text">$i18n{networkVpnBuiltin}</div>
        <template is="dom-if" if="[[!vpnIsEnabled_]]">
          <cr-policy-indicator indicator-type="devicePolicy">
          </cr-policy-indicator>
        </template>
        <cr-icon-button class="icon-add-circle"
            disabled="[[!vpnIsEnabled_]]"
            aria-label="$i18n{internetAddVPN}"
            on-click="onAddVpnButtonTap_"
            tabindex$="[[tabindex]]">
        </cr-icon-button>
      </div>
    </template>

    <!-- List of networks (empty if no networks exist). -->
    <template is="dom-if"
        if="[[shouldShowNetworkList_(networkStateList_, deviceState)]]">
      <network-list id="networkList" show-buttons
          show-technology-badge="[[showTechnologyBadge_]]"
          networks="[[networkStateList_]]"
          on-selected="onNetworkSelected_"
          device-state="[[deviceState]]">
      </network-list>
    </template>

    <!-- List of cellular and instant tethering networks -->
    <template is="dom-if"
        if="[[shouldShowCellularNetworkList_(networkStateList_,
                                              deviceState)]]">
      <cellular-networks-list id="cellularNetworkList"
          networks="[[networkStateList_]]"
          show-technology-badge="[[showTechnologyBadge_]]"
          on-selected="onNetworkSelected_"
          cellular-device-state="[[deviceState]]"
          tether-device-state="[[tetherDeviceState]]"
          global-policy="[[globalPolicy]]"
          is-connected-to-non-cellular-network="[[isConnectedToNonCellularNetwork]]"
          can-show-spinner="[[!isCellularSetupActive]]">
      </cellular-networks-list>
    </template>

    <!-- Instructions for how to enable "Google Play Services" notifications
        (needed for Instant Tethering). -->
    <template is="dom-if" if="[[showGmsCoreNotificationsSection_(
        notificationsDisabledDeviceNames_)]]">
      <div id="gmscore-notifications-container"
          no-networks-text-below$="[[!networkStateList_.length]]">
        <div>$i18n{gmscoreNotificationsTitle}</div>
        <div id="gmscore-notifications-device-string"
            class="cr-secondary-text">
          [[getGmsCoreNotificationsDevicesString_(
              notificationsDisabledDeviceNames_)]]
        </div>
        <ol id="gmscore-notifications-instructions"
            class="cr-secondary-text">
          <li>$i18n{gmscoreNotificationsFirstStep}</li>
          <li>$i18n{gmscoreNotificationsSecondStep}</li>
          <li>$i18n{gmscoreNotificationsThirdStep}</li>
          <li>$i18n{gmscoreNotificationsFourthStep}</li>
        </ol>
      </div>
    </template>

    <!-- Text shown if no networks exist. -->
    <localized-link
        class="no-networks"
        hidden="[[hideNoNetworksMessage_(networkStateList_, deviceState)]]"
        localized-string=
            "[[getNoNetworksInnerHtml_(deviceState, tetherDeviceState)]]">
    </localized-link>

    <template is="dom-if" if="[[isShowingVpn_]]">
      <!-- Third party VPNs. -->
      <template is="dom-repeat"
          items="[[getVpnProviders_(vpnProviders, thirdPartyVpns_)]]">
        <div id="[[item.providerName]]"
            class="vpn-header layout horizontal center">
          <div class="flex settings-box-text">[[item.providerName]]</div>
          <cr-icon-button class="icon-add-circle"
              aria-label$="[[getAddThirdPartyVpnA11yString_(item)]]"
              on-click="onAddThirdPartyVpnTap_" tabindex$="[[tabindex]]">
          </cr-icon-button>
        </div>
        <network-list show-buttons
            hidden$="[[!haveThirdPartyVpnNetwork_(thirdPartyVpns_, item)]]"
            networks="[[getThirdPartyVpnNetworks_(thirdPartyVpns_, item)]]"
            on-selected="onNetworkSelected_">
        </network-list>
        <div hidden$="[[haveThirdPartyVpnNetwork_(thirdPartyVpns_, item)]]"
            class="no-networks settings-box-text">
          $i18n{internetNoNetworks}
        </div>
      </template>
    </template>
  </div>

  <template is="dom-if"
      if="[[shouldShowVpnPreferences_(isManaged_, isShowingVpn_)]]">
    <div class="settings-box first">
      <h2>$i18n{networkVpnPreferences}</h2>
    </div>
    <div class="settings-box first">
      <network-always-on-vpn id="alwaysOnVpnSelector"
          networks="[[getAlwaysOnVpnNetworks_(deviceState,
            networkStateList_, thirdPartyVpns_)]]"
          mode="{{alwaysOnVpnMode_}}"
          service="{{alwaysOnVpnService_}}">
      </network-always-on-vpn>
    </div>
  </template>
</template>

